<template>
	<section >
		<el-row>
			<!--<el-col :span="24">
				<el-breadcrumb separator=">">
				  <el-breadcrumb-item :to="{ path: '/stucoursecontent?id='+$route.query.id }" >课程内容</el-breadcrumb-item>
				  <el-breadcrumb-item >课程内容</el-breadcrumb-item>	
			</el-col>			-->
		  <el-col :span="24">
			<div class="roledivision-content">
				<p>团队组建及角色划分</p>
				<p class="zhineng">各角色岗位职责:</p>
				<p class="jieshao">首席执行官(CEO)：CEO是一个团队的核心，负责提交团队作业，修改小组的名称</p>
				<p class="jieshao">首席市场官(CMO):CMO是指企业中负责市场运营工作的高级管理人员，又称作市场部经理、营销总监</p>
				<p class="jieshao">首席技术官(CTO):CTO（首席技术官）,即企业内负责技术的最高负责人</p>
				<p class="jieshao">首席财务官(CFO):CFO是企业治理结构发展到一个新阶段的必然产物。没有首席财务官的治理结构不是现代意义上完善的治理结构。</p>
				<p class="jieshao">顾问(COU):COU顾问提供的意见以独立、中立为首要</p>
				<p class="jieshao">政府及公共组织(GOV):GOV一般用于描述拥有作为美国联邦政府一个分支或机构的域名的实体</p>
			</div>			  	
		  </el-col>
		  <el-col :span="8" v-for="(el,index) in List" style="margin-top: 5px;">
		    <el-card :body-style="{ padding: '0px' }">
				<div class="seats-list">							
					<div class="head-content">
						<div v-for="sel in el.courseStudents" v-if="sel.teamRole=='ceo'">					
							<p v-bind:class="['radius',sel.teamRole=='ceo'?'change':'']"><span>{{sel.user.realName}}</span></p>
							<p class="test">首席执行官</p>	
						</div>
						<div v-if="teamRole[index].indexOf('ceo')=='-1'" v-on:click="changeinfo(el,'ceo')">					
							<p v-bind:class="['radius',classid==el.teamId&&classname=='ceo'?'change':'']"><span>CEO</span></p>
							<p class="test">首席执行官</p>	
						</div>						
					</div>
					<div class="center-content clearfix">
						<div class="left-box">
							<div v-for="sel in el.courseStudents" v-if="sel.teamRole=='cmo'">					
								<p v-bind:class="['radius',sel.teamRole=='cmo'?'change':'']"><span>{{sel.user.realName}}</span></p>
								<p class="test">首席市场官</p>	
							</div>
							<div v-if="teamRole[index].indexOf('cmo')=='-1'" v-on:click="changeinfo(el,'cmo')">					
								<p v-bind:class="['radius',classid==el.teamId&&classname=='cmo'?'change':'']"><span>CMO</span></p>
								<p class="test">首席市场官</p>	
							</div>
							<div v-for="sel in el.courseStudents" v-if="sel.teamRole=='cfo'">					
								<p v-bind:class="['radius',sel.teamRole=='cfo'?'change':'']"><span>{{sel.user.realName}}</span></p>
								<p class="test">首席财务官</p>	
							</div>
							<div v-if="teamRole[index].indexOf('cfo')=='-1'" v-on:click="changeinfo(el,'cfo')">					
								<p v-bind:class="['radius',classid==el.teamId&&classname=='cfo'?'change':'']"><span>CFO</span></p>
								<p class="test">首席财务官</p>	
							</div>						
						</div>
						<div class="center-box">
							<div class="box-content"> 
<!--								<el-input v-model="input" placeholder="请填写队名"></el-input>
-->								<p>{{el.name}}</p>
							</div>
						</div>
						<div class="right-box">
							<div v-for="sel in el.courseStudents" v-if="sel.teamRole=='cto'">					
								<p v-bind:class="['radius',sel.teamRole=='cto'?'change':'']"><span>{{sel.user.realName}}</span></p>
								<p class="test">首席技术官</p>	
							</div>
							<div v-if="teamRole[index].indexOf('cto')=='-1'" v-on:click="changeinfo(el,'cto')">					
								<p v-bind:class="['radius',classid==el.teamId&&classname=='cto'?'change':'']"><span>CTO</span></p>
								<p class="test">首席技术官</p>	
							</div>	
							<div v-for="sel in el.courseStudents" v-if="sel.teamRole=='cou'">					
								<p v-bind:class="['radius',sel.teamRole=='cou'?'change':'']"><span>{{sel.user.realName}}</span></p>
								<p class="test">顾问</p>	
							</div>
							<div v-if="teamRole[index].indexOf('cou')=='-1'" v-on:click="changeinfo(el,'cou')">					
								<p v-bind:class="['radius',classid==el.teamId&&classname=='cou'?'change':'']"><span>COU</span></p>
								<p class="test">顾问</p>	
							</div>					
						</div>	
					</div>
					<div class="bottom-content">
							<div v-for="sel in el.courseStudents" v-if="sel.teamRole=='gov'">					
								<p v-bind:class="['radius',sel.teamRole=='gov'?'change':'']"><span>{{sel.user.realName}}</span></p>
								<p class="test">政府及公共组织</p>	
							</div>
							<div v-if="teamRole[index].indexOf('gov')=='-1'" v-on:click="changeinfo(el,'gov')">					
								<p v-bind:class="['radius',classid==el.teamId&&classname=='gov'?'change':'']"><span>GOV</span></p>
								<p class="test">政府及公共组织</p>	
							</div>						
					</div>
				</div>	
		    </el-card>
		  </el-col>
		  <el-col :span="24" style="text-align: center;margin-top: 20px;">
		  		<el-button type="primary"  size="large" @click="setSeat()">确定座位</el-button>
		  </el-col>
		</el-row>	
	</section>
</template>

<script>
	import { courseTeam,coursestuseat } from '../../api/api';
	import { quillEditor } from 'vue-quill-editor' //调用编辑器

	//import NProgress from 'nprogress'
	export default {
		data() {
			return {
				intro:"",		
				Type:"0",
				ID:this.$route.query.id,
				List:[],
				teamRole:[],
				classname:"",
				classid:""
			}
		},  		
		methods: {
			getTeam:function(){
				let params={courseId:this.ID,pageSize:0};
				var _this=this
				courseTeam(params).then((res) => {
					_this.List=res.list;
					$.each(res.list, function(e,value) {
						var teamRole=[]
						if(value.courseStudents.length>0){
							$.each(value.courseStudents, function(i,result) {
								teamRole.push(result.teamRole)
							});							
						}
						_this.teamRole.push(teamRole)
					});
				});				
			},
			changeinfo:function(el,name){
				this.classname=name
				this.classid=el.teamId
			},			
		    skip(link,id,row){
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:id,
		        		}
		        	}
		        )
		    },				
			setSeat:function(row,type){
				this.$confirm('确认选定座位吗?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'
				}).then(() => {
					var params=new URLSearchParams();
					params.append('courseId',this.ID);
					params.append('teamId',this.classid);
					params.append('teamRole',this.classname);
					params.append('userId',this.$store.state.userId);
					coursestuseat(params).then((r) => {
						if(!r.error){
							this.$message({
								message: '座位选定成功',
								type: 'success'
							});
							this.skip('/stucoursecontent',this.ID)
						}else{
							this.$message({
								message: '座位选定失败',
								type: 'error'
							});				
							this.getTeam()
						}
					})	
				})			
			
			},				
		},	
		mounted() {
			this.getTeam()
			console.log(this.$store.state)
		}
	};

</script>

<style scoped src='../../../static/css/all.css'>
</style>